﻿@{
    ViewBag.Title = "登录系统";
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta name="renderer" content="ie-stand" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录系统</title>
    <link href="~/Content/css/animate.min.css" rel="stylesheet" />
    <link href="~/content/css/login.css" rel="stylesheet" />

    <script src="~/content/js/jquery-1.9.1.min.js"></script>


</head>
<body>
    <div class="login-body-bg">
        <img src="~/content/images/login-bg.jpg" />
    </div>
    <div class="login-bg-b">
        <img src="~/content/images/login-bg-b.png" />
    </div>
    <div class="header">
        <div class="login-title" title="">
            <img src="~/content/images/login-title.png" />
        </div>
    </div>
    <div class="login-wrapper">
        <div class="login-left-img">
            <div class="big-img">
                <div class="img-box t1 animated flipInY">
                    <img src="~/content/images/t1.jpg" />
                </div>
                <div class="img-box  t2 animated flipInY">
                    <img src="~/content/images/t2.jpg" />
                </div>
                <div class="img-box t3 animated flipInY">
                    <img src="~/content/images/t3.jpg" />
                </div>
                <div class="img-box m1 animated fadeInLeft">
                    <img src="~/content/images/m1.jpg" />
                </div>
                <div class="img-box m2 animated flipInY">
                    <img src="~/content/images/m2.jpg" />
                </div>
                <div class="img-box m3 animated flipInY">
                    <img src="~/content/images/m3.jpg" />
                </div>
                <div class="img-box m4 animated flipInY">
                    <img src="~/content/images/m4.jpg" />
                </div>
                <div class="img-box m5 animated fadeInRight">
                    <img src="~/content/images/m5.jpg" />
                </div>
                <div class="img-box b1 animated slideInUp">
                    <img src="~/content/images/b1.jpg" />
                </div>
                <div class="img-box b2 animated slideInUp">
                    <img src="~/content/images/b2.jpg" />
                </div>
            </div>
            <div class="gezi animated fadeInLeft">
                <img src="~/content/images/gezi.png" />
            </div>
            <div class="no2 bee-flight">
                <img src="~/content/images/no2.png" />
            </div>
            <div class="co bee-flight">
                <img src="~/content/images/co.png" />
            </div>
            <div class="so2 bee-flight">
                <img src="~/content/images/so2.png" />
            </div>
            <div class="o3 bee-flight">
                <img src="~/content/images/o3.png" />
            </div>
        </div>
        <div class="login-box">
            <form id="loginForm" action="@Url.Action("Index", "Home")" method="post">
                <div class="form-group">
                    <em class="user-icon"></em>
                    <input type="text" class="form-control user" id="UserAccount" name="UserAccount" value="@ViewData["UserAccount"]" placeholder="用户账号" />
                </div>
                <div class="form-group">
                    <em class="passw-icon "></em>
                    <input type="password" class="form-control user" id="Password" name="Password" value="@ViewData["Password"]" placeholder="密码" />
                </div>
                <div class="form-group submit-box">
                    <button type="submit" id="login-submit" class="btn btn-login">登&nbsp;录</button>
                </div>
                <div class="form-group error-box">
                    <span class="error-message">@ViewData["errorMsg"]</span>
                </div>
            </form>
            <div class="support">建议使用IE9以上及火狐、谷歌浏览器浏览</div>
        </div>
    </div>
    <div class="footer">
        <p></p>
        <p>© 2016 广东旭诚科技有限公司   版本号：V1.0.0.0</p>

    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#UserAccount").focus(function () {
                $(".erro-message").html("");
            });

            $("#Password").focus(function () {
                $(".erro-message").html("");
            });

            $(".login-body-bg").animate({ left: "-150px", right: "-150px", top: "-150px", bottom: "-150px" }, 15000);

        });


        $("#login-submit").click(function () {
            $(this).attr("disabled", true);

            if ($("#UserAccount").val() === "") {
                $(".erro-message").html("");
                $(".erro-message").html("请输入用户名");
                $(this).attr("disabled", false);
                return;
            }
            if ($("#Password").val() === "") {
                $(".erro-message").html("");
                $(".erro-message").html("请输入密码");
                $(this).attr("disabled", false);
                return;
            }
            $("#login-submit").html("登录中...");
            $("#loginForm").submit();
        });
        $("body").keydown(function (event) {
            if (event.keyCode == 13)   //回车键的键值为13
                $("#login-submit").click();  //调用登录按钮的登录事件
        });
    </script>
</body>
</html>
